import Link from "next/link";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { EventRow } from "@/components/event-row";
import { LiveFeed } from "@/components/live-feed";
import { Badge, Bar, Chip, Empty, PageHeader, Panel, Score, Sparkline, Table, Td, TierBadge } from "@/components/ui";
import { api } from "@/lib/api";
import { CHANNELS, CHANNEL_KEYS, feedHref, fmtInt, typeLabel } from "@/lib/format";

export const dynamic = "force-dynamic";

/** Categories that are valid desks even when they have no recent event. */
const KNOWN = new Set<string>([...CHANNEL_KEYS, "cloud", "developer", "consumer-tech", "semiconductors", "pharma", "statistics", "space", "automotive", "commerce", "payments", "crypto", "enterprise", "internet", "standards", "technology", "media", "politics", "sports", "energy", "transport", "telecom", "education", "retail", "gaming", "web-policy", "packages", "api"]);

function channelOf(channel: string) {
  return CHANNELS.find((c) => c.key === channel && c.key !== "all" && c.key !== "breaking" && c.key !== "silent");
}

export async function generateMetadata({ params }: { params: Promise<{ channel: string }> }): Promise<Metadata> {
  const { channel } = await params;
  const label = channelOf(channel)?.label ?? channel;
  return { title: `${label} desk`, description: `Live ${label} events detected by WebSensor: breaking, silent changes, active sources and trending entities.`, alternates: { canonical: `/category/${channel}` } };
}

/** Specialized real-time desk (spec §103). */
export default async function CategoryPage({ params }: { params: Promise<{ channel: string }> }) {
  const { channel } = await params;
  if (!/^[a-z0-9-]{2,32}$/.test(channel)) notFound();
  const desk = await api.categoryDesk(channel);
  if (!desk || (desk.recent.length === 0 && !KNOWN.has(channel))) notFound();
  const chan = channelOf(channel);
  const label = chan?.label ?? channel;
  const series = desk.series.map((p) => p.n);
  const total48 = series.reduce((a, b) => a + b, 0);
  const maxType = Math.max(1, ...desk.by_type.map((t) => t.n));
  const maxSrc = Math.max(1, ...desk.active_sources.map((s) => s.events_24h));
  return (
    <>
      <PageHeader
        compact
        kicker={
          <span className="flex flex-wrap items-center gap-1.5">
            <span>Desk</span>
            <span className="text-fg-subtle">·</span>
            {desk.categories.map((c) => (
              <Chip key={c} href={`/category/${c}`} tone={c === channel ? "signal" : "default"}>{c}</Chip>
            ))}
          </span>
        }
        title={label}
        description={`Meaningful changes from sources categorized as ${desk.categories.map((c) => `“${c}”`).join(", ")} — official pages, feeds, status pages, documentation, filings.`}
        actions={
          <div className="flex items-center gap-3">
            <div className="text-right">
              <div className="label">48 h</div>
              <div className="font-mono text-base font-semibold tabular">{fmtInt(total48)}</div>
            </div>
            <Sparkline values={series} width={160} height={36} tone="signal" />
          </div>
        }
      />
      <div className="grid gap-4 xl:grid-cols-[1fr_340px]">
        <div className="min-w-0">
          <LiveFeed initial={desk.recent} initialCursor={desk.nextCursor} fixed={chan ? chan.key : undefined} extraQuery={chan ? undefined : { category: channel }} showTabs={false} title={`${label.toUpperCase()} · LIVE`} />
        </div>
        <aside className="flex min-w-0 flex-col gap-4">
          <Panel title={<span className="text-hot">Breaking · 24 h</span>} dense action={<Link href={feedHref({ category: channel, signal_min: 80 }, "/live")} className="text-[11px] text-fg-subtle hover:text-fg">live →</Link>}>
            {desk.breaking.length ? desk.breaking.slice(0, 8).map((e) => <EventRow key={e.id} ev={e} />) : <Empty>Nothing is breaking in this desk right now.</Empty>}
          </Panel>
          <Panel title={<span className="text-silent">Silent</span>} dense action={<Link href={feedHref({ category: channel, silent_change: true }, "/live")} className="text-[11px] text-fg-subtle hover:text-fg">all →</Link>}>
            {desk.silent.length ? desk.silent.slice(0, 8).map((e) => <EventRow key={e.id} ev={e} />) : <Empty>No silent change in this desk.</Empty>}
          </Panel>
          <Panel title="Active sources · 24 h" dense action={<Link href={`/sources?category=${channel}`} className="text-[11px] text-fg-subtle hover:text-fg">sources →</Link>}>
            {desk.active_sources.length ? (
              <Table head={["Source", "Kind", "24 h", "", "Max"]}>
                {desk.active_sources.map((s) => (
                  <tr key={s.id} className="hover:bg-panel-2/60">
                    <Td>
                      <span className="flex items-center gap-1.5"><TierBadge tier={s.tier} /><Link href={`/source/${s.id}`} className="truncate font-medium hover:underline">{s.name}</Link></span>
                      <div className="truncate font-mono text-[10.5px] text-fg-subtle">{s.domain}</div>
                    </Td>
                    <Td>{s.first_party === false ? <Badge kind="external" compact /> : <Badge kind="first-party" compact />}</Td>
                    <Td mono>{fmtInt(s.events_24h)}</Td>
                    <Td><div className="w-12"><Bar value={s.events_24h} max={maxSrc} /></div></Td>
                    <Td><Score value={s.max_importance} size="sm" /></Td>
                  </tr>
                ))}
              </Table>
            ) : (
              <Empty>No source produced an event in this desk in the last 24 h.</Empty>
            )}
          </Panel>
          <Panel title="Trending entities · 24 h" dense action={<Link href="/explore?tab=trending" className="text-[11px] text-fg-subtle hover:text-fg">all →</Link>}>
            {desk.trending_entities.length ? (
              <ol className="divide-y divide-line">
                {desk.trending_entities.map((t, i) => (
                  <li key={t.id} className="grid grid-cols-[1.25rem_1fr_auto] items-center gap-2 px-3 py-1.5 text-[13px]">
                    <span className="font-mono text-[11px] text-fg-subtle tabular">{i + 1}</span>
                    <div className="min-w-0">
                      <Link href={`/entity/${t.id}`} className="block truncate font-medium hover:underline">{t.name}</Link>
                      <div className="truncate text-[11px] text-fg-subtle">{t.type.replace(/_/g, " ")} · {t.sources} source{t.sources === 1 ? "" : "s"}</div>
                    </div>
                    <span className="font-mono text-[12px] font-semibold tabular">{fmtInt(t.events_24h)}</span>
                  </li>
                ))}
              </ol>
            ) : (
              <Empty>No entity is trending in this desk.</Empty>
            )}
          </Panel>
          <Panel title="By type · 7 d" dense>
            {desk.by_type.length ? (
              <ul className="divide-y divide-line">
                {desk.by_type.map((t) => (
                  <li key={t.event_type} className="grid grid-cols-[8.5rem_1fr_3rem] items-center gap-2 px-3 py-1.5 text-[12.5px]">
                    <Link href={feedHref({ category: channel, event_type: t.event_type }, "/live")} className="truncate hover:underline">{typeLabel(t.event_type)}</Link>
                    <Bar value={t.n} max={maxType} tone="info" />
                    <span className="text-right font-mono text-fg-subtle tabular">{fmtInt(t.n)}</span>
                  </li>
                ))}
              </ul>
            ) : (
              <Empty />
            )}
          </Panel>
        </aside>
      </div>
    </>
  );
}